import { Card, Row, Col, Avatar } from 'antd';
import React from 'react';

import IconFont from '@/components/Icon'

import styles from '../style.less';




const TotalCard = ({data, loading}) => (
  <div style={{
      marginBottom: '25px'
  }}>
    <Row gutter={16}>
        <Col span={6}>
            <Card bordered={false} loading={loading}>
                <Row type="flex" justify="space-between">
                    <Col span={12} style={{
                        display: 'flex',
                        justifyContent: 'center'
                    }}>
                        <IconFont type="icon-qiye" style={{width:'66px',height: '66px', fontSize: '60px'}}/>

                    </Col>
                    <Col span={12}>
                        <Card.Meta
                            title={(<span style={{fontSize: '12px', color: 'rgb(162, 162, 162)'}}>{data[0].type}</span>)}
                            description={(<span style={{fontSize: '26px', color: '#000'}}>{data[0].value}家</span>)}
                        />
                    </Col>
                </Row>
            </Card>
        </Col>
        <Col span={6}>
            <Card bordered={false} loading={loading}>
                <Row type="flex" justify="space-between">
                    <Col span={12} style={{
                        display: 'flex',
                        justifyContent: 'center'
                    }}>
                        <IconFont type="icon-chanpin" style={{width:'66px',height: '66px', fontSize: '60px'}}/>
                    </Col>
                    <Col span={12}>
                        <Card.Meta
                            title={(<span style={{fontSize: '12px', color: 'rgb(162, 162, 162)'}}>{data[1].type}</span>)}
                            description={(<span style={{fontSize: '26px', color: '#000'}}>{data[1].value}件</span>)}
                        />
                    </Col>
                </Row>
            </Card>
        </Col>
        <Col span={6}>
            <Card bordered={false} loading={loading}>
                <Row type="flex" justify="space-between">
                    <Col span={12} style={{
                        display: 'flex',
                        justifyContent: 'center'
                    }}>
                        <IconFont type="icon-jianbao" style={{width:'66px',height: '66px', fontSize: '60px'}}/>

                    </Col>
                    <Col span={12}>
                        <Card.Meta
                            title={(<span style={{fontSize: '12px', color: 'rgb(162, 162, 162)'}}>{data[2].type}</span>)}
                            description={(<span style={{fontSize: '26px', color: '#000'}}>{data[2].value}次</span>)}
                        />
                    </Col>
                </Row>
            </Card>
        </Col>
        <Col span={6}>
            <Card bordered={false} loading={loading}>
                <Row type="flex" justify="space-between">
                    <Col span={12} style={{
                        display: 'flex',
                        justifyContent: 'center'
                    }}>
                        <IconFont type="icon-zoufang" style={{width:'66px',height: '66px', fontSize: '60px'}}/>

                    </Col>
                    <Col span={12}>
                        <Card.Meta
                            title={(<span style={{fontSize: '12px', color: 'rgb(162, 162, 162)'}}>{data[3].type}</span>)}
                            description={(<span style={{fontSize: '26px', color: '#000'}}>{data[3].value}次</span>)}
                        />
                    </Col>
                </Row>
            </Card>
        </Col>
    </Row>

  </div>
);

export default TotalCard;
